"use client";

/**
 * /w/:workspace/notifications — the in-app notification inbox (TASK-0094 R5).
 *
 * Live: the list refetches on the `notification.push` frame (via
 * useNotifications' invalidation) + the mark-read mutations. Deep links
 * resolve the stored `link` `{type, id, pageId?}` → the page / database /
 * record page route, then mark the row read (the badge decrements). Two
 * sections (Unread (n) / Read), `role=list`, the "You're all caught up"
 * empty state.
 */
import { useMemo, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import {
  AtSign,
  Bell,
  CheckCheck,
  Database,
  Link2,
  Loader2,
  MessageSquare,
  PersonStanding,
  Puzzle,
  Workflow
} from "lucide-react";
import { cn, formatRelativeTime } from "@/lib/utils";
import { notificationApi } from "@/lib/api";
import { useNotifications, useNotificationList } from "@/hooks/use-notifications";
import { useWorkspace } from "@/hooks/use-workspace";
import { UserAvatar } from "@/components/database/cell-renderer";
import type { Notification, NotificationLink } from "@/lib/types";

/** The 8 NotificationType values → the row icon. */
const TYPE_ICON: Record<Notification["type"], React.ComponentType<{ className?: string }>> = {
  MENTION: AtSign,
  COMMENT: MessageSquare,
  ASSIGNMENT: PersonStanding,
  PAGE_SHARED: Link2,
  TASK_ASSIGNED: CheckCheck,
  DATABASE_CHANGE: Database,
  AUTOMATION: Workflow,
  INTEGRATION: Puzzle
};

/**
 * Resolve a notification's deep link to a route (or null = not navigable
 * from the inbox — e.g. a comment/record link written before the `pageId`
 * ride-along existed). `pageId` is the ride-along the API added (TASK-0094
 * R5, recorded) so a comment/record link opens its page directly.
 */
function resolveNotificationHref(
  link: NotificationLink | null | undefined,
  workspaceSlug: string
): string | null {
  if (!link) return null;
  switch (link.type) {
    case "page":
      return `/w/${workspaceSlug}/page/${link.id}`;
    case "database":
      return `/w/${workspaceSlug}/databases/${link.id}`;
    case "record":
    case "comment":
      // The comment/record lives on a page (records are 1:1 pages) — the
      // `pageId` ride-along points there. Without it (old rows) the row is
      // not navigable from the inbox (recorded).
      return link.pageId ? `/w/${workspaceSlug}/page/${link.pageId}` : null;
    default:
      return null;
  }
}

export default function NotificationsPage() {
  const params = useParams<{ workspace: string }>();
  const workspaceSlug = params?.workspace ?? "";
  const { data: workspace } = useWorkspace(workspaceSlug);
  const router = useRouter();
  const qc = useQueryClient();
  const [unreadOnly, setUnreadOnly] = useState(false);

  // The list (live via useNotifications' push invalidation) + the bell count
  // (shared key — the topbar bell and this page stay in sync).
  const { data: all = [] } = useNotificationList();
  const { invalidate, unreadCount } = useNotifications();
  const wsSlug = workspace?.slug || workspaceSlug;

  const items = useMemo(
    () => (unreadOnly ? all.filter((n) => n.readAt === null) : all),
    [all, unreadOnly]
  );
  const unread = useMemo(() => items.filter((n) => n.readAt === null), [items]);
  const read = useMemo(
    () => items.filter((n) => n.readAt !== null).slice(0, 50),
    [items]
  );

  const markRead = useMutation({
    mutationFn: (id: string) => notificationApi.markRead(id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["notifications", "list"] });
      invalidate();
    }
  });
  const markAllRead = useMutation({
    mutationFn: () => notificationApi.markAllRead(),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["notifications", "list"] });
      invalidate();
    }
  });

  const openItem = (n: Notification) => {
    const href = resolveNotificationHref(n.link, wsSlug);
    if (n.readAt === null) markRead.mutate(n.id);
    if (href) router.push(href);
  };

  const renderRow = (n: Notification, dimmed: boolean) => {
    const Icon = TYPE_ICON[n.type] ?? Bell;
    const href = resolveNotificationHref(n.link, wsSlug);
    const unreadRow = n.readAt === null;
    return (
      <li
        key={n.id}
        data-testid={`notification-row-${n.id}`}
        className={cn(
          "flex items-start gap-3 px-3 py-3",
          unreadRow && !dimmed && "bg-primary/5",
          dimmed && "opacity-60"
        )}
      >
        <span className="mt-0.5 shrink-0">
          {n.actor ? (
            <UserAvatar user={{ id: n.actor.id, name: n.actor.name, avatarUrl: n.actor.avatarUrl }} size={28} />
          ) : (
            <span className="flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground">
              <Icon className="size-4" aria-hidden />
            </span>
          )}
        </span>
        <div className="min-w-0 flex-1">
          <p className={cn("text-sm", unreadRow && !dimmed && "font-medium")}>
            {n.actor ? (
              <span className="text-muted-foreground">{n.actor.name} · </span>
            ) : null}
            {n.title}
          </p>
          {n.body ? (
            <p className="mt-0.5 truncate text-xs text-muted-foreground">{n.body}</p>
          ) : null}
          <p className="mt-0.5 text-[11px] text-muted-foreground">{formatRelativeTime(n.createdAt)}</p>
        </div>
        {unreadRow && !dimmed ? (
          <span className="mt-1 size-2 shrink-0 rounded-full bg-primary" aria-label="Unread" />
        ) : null}
        {href ? (
          <button
            type="button"
            className="shrink-0 rounded-md px-2 py-1 text-xs text-primary hover:bg-primary/10"
            onClick={() => openItem(n)}
          >
            Open
          </button>
        ) : null}
      </li>
    );
  };

  return (
    <div className="mx-auto max-w-2xl px-6 py-8">
      <div className="mb-4 flex items-center justify-between">
        <h1 className="text-xl font-semibold">Notifications</h1>
        <div className="flex items-center gap-2">
          <button
            type="button"
            className="rounded-md border px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted"
            onClick={() => setUnreadOnly((v) => !v)}
            aria-pressed={unreadOnly}
          >
            {unreadOnly ? "Show all" : "Unread only"}
          </button>
          <button
            type="button"
            data-testid="mark-all-read"
            className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
            onClick={() => markAllRead.mutate()}
            disabled={markAllRead.isPending || unreadCount === 0}
          >
            {markAllRead.isPending ? (
              <Loader2 className="size-3.5 animate-spin" />
            ) : (
              <CheckCheck className="size-3.5" />
            )}
            Mark all read
          </button>
        </div>
      </div>

      {all.length === 0 ? (
        <p className="text-sm text-muted-foreground">You're all caught up.</p>
      ) : (
        <div className="space-y-6">
          {unread.length > 0 && (
            <section aria-label="Unread notifications">
              <h2 className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Unread ({unread.length})
              </h2>
              <ul role="list" className="divide-y divide-border rounded-md border border-border">
                {unread.map((n) => renderRow(n, false))}
              </ul>
            </section>
          )}
          {read.length > 0 && (
            <section aria-label="Read notifications">
              <h2 className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Read
              </h2>
              <ul role="list" className="divide-y divide-border rounded-md border border-border">
                {read.map((n) => renderRow(n, true))}
              </ul>
            </section>
          )}
          {unreadOnly && unread.length === 0 && all.length > 0 && (
            <p className="text-sm text-muted-foreground">No unread notifications.</p>
          )}
        </div>
      )}
    </div>
  );
}